<template>
  <div class="home">
    
    <div v-for="item in list" :key="item.id">
    <router-link :to="'/detail/'+item.id">
    {{item.name}} 
    </router-link>
    
    <img :src="item.image" @click="goTo(`/detail/${item.id}`)" />
    </div>
  </div>
 
</template>

<script>
//import axios from 'axios';
import {mapActions,mapState} from 'vuex';
export default {
  name: 'Home',
  components: {
    
  },
  data(){
   return{
    // list:[]
   }
  },
  created(){
   
    // axios.get('/api/list').then((res)=>{
    //   console.log('api/list res',res);
    //   this.list=res.data.data;
    // })
    this.getList();
  },
  computed:{
    ...mapState(['list'])
  },

  methods:{
    ...mapActions(["getList"]),
    goTo(url){
      this.$router.push(url);
    }
  }
}
</script>
